<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<news-com></news-com>
			<news-com></news-com>
			<news-com></news-com>			
		</div>
		
		<template id="news">
			<div>
				<h2>体育</h2>
				<ul>
					<li>体育新闻</li>
					<li>体育新闻</li>
					<li>体育新闻</li>
					<li>体育新闻</li>
				</ul>
			</div>
		</template>
		<script type="text/x-template" id="news2">
			<div>
				<h2>体育</h2>
				<ul>
					<li>体育新闻</li>
					<li>体育新闻</li>
					<li>体育新闻</li>
					<li>体育新闻</li>
				</ul>
			</div>
		</script>

		<script>
			/*
				命名规则：
					可以使用烤串命名法 a-b-c
					可以使用驼峰命名法 miaovKetang
					不能使用html规定的标签名 div span

					在模板中使用组件的时候，一定要使用烤串命名法
				模板放在html中
					放在一对<template></template>标签中
						HTML <template> 元素 是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。

						可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。
						https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template
					放在一对<script><\/script>标签中
			*/
			// 组件只能有一个根元素
			Vue.component('newsCom',{
				template:`#news2`
			})



			// 未挂载
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello'
				}
			});

		</script>
	</body>
</html>